<template>
  <div id="content">
    <van-nav-bar
      title="宠物详情"
      left-arrow
      @click-left="onClickLeft"
      :border="false"
    />
    <div class="imgbody">
      <img :src="petMessage.imgname" alt="" />
    </div>
    <p>{{ petMessage.title }}</p>
    <div class="label">
      <span v-if="petStatus.indexOf('已免疫') != -1">已免疫</span>
      <span v-if="petStatus.indexOf('已驱虫') != -1">已驱虫</span>
      <span v-if="petStatus.indexOf('已绝育') != -1">已绝育</span>
      <span v-if="petStatus.indexOf('未免疫') != -1" class="no">未免疫</span>
      <span v-if="petStatus.indexOf('未驱虫') != -1" class="no">未驱虫</span>
      <span v-if="petStatus.indexOf('未绝育') != -1" class="no">未绝育</span>
    </div>
    <dt>
      <dl>{{ petMessage.age }}</dl>
      <dl>{{ petMessage.sex == 0 ? "男孩" : "女孩" }}</dl>
      <dl>|</dl>
      <dl>{{ petMessage.area }}</dl>
    </dt>
    <p>Ta的故事</p>
    <div class="store">
      {{ petMessage.store }}
    </div>
    <div class="tabBar">
      <div>
        <van-cell
          class="iconfont icon-fenxiang1"
          title="分享"
          @click="showShare = true"
        />
        <van-share-sheet
          v-model="showShare"
          title="立即分享给好友"
          :options="options"
          @select="onSelect"
        />
      </div>
      <div>
        <i class="iconfont icon-shoucang" v-if="!icon" @click="addCollect"></i>
        <i
          class="iconfont icon-shoucang-shoucang"
          v-else
          @click="removeCollect"
        ></i>
        <span>收藏</span>
      </div>
      <van-button
        round
        type="danger"
        @click="$router.push(`/MyAdoptionAdd/${rid}`)"
        >我要领养</van-button
      >
    </div>
  </div>
</template>

<script>
import { getSingleRe, getaddFade } from "@/api/recommend";
import {
  addCollection,
  removeCollection,
  isCollection,
} from "@/api/collection";
import { Toast } from "vant";

export default {
  data() {
    return {
      // 接收路由参数
      rid: this.$route.params.rid,
      // 收藏图标
      icon: false,
      // 宠物信息
      petMessage: "",
      // 宠物状态
      petStatus: "",
      //宠物足迹
      petfade: "",
      // 分享
      showShare: false,
      options: [
        [
          { name: "微信", icon: "wechat" },
          { name: "朋友圈", icon: "wechat-moments" },
          { name: "微博", icon: "weibo" },
          { name: "QQ", icon: "qq" },
        ],
        [
          { name: "复制链接", icon: "link" },
          { name: "分享海报", icon: "poster" },
          { name: "二维码", icon: "qrcode" },
          { name: "小程序码", icon: "weapp-qrcode" },
        ],
      ],
    };
  },
  methods: {
    // 分享
    onSelect(option) {
      Toast(option.name);
      this.showShare = false;
    },
    onClickLeft() {
      this.$router.push("/pet");
    },
    // 获取推荐信息
    getSingleMessage() {
      getSingleRe({ pid: this.rid }).then(res => {
        this.petMessage = res.data.message[0];
        this.petStatus = res.data.message[0].label;
        console.log("----------------------------------");
        console.log(this.petMessage);

        // 并发操作，判断用户是否已收藏推荐
        isCollection({
          uid: this.$store.state.user.uid,
          title: this.petMessage.title,
        }).then(res => {
          console.log(res);
          if (res.data.status == 200) {
            this.icon = false;
          } else {
            this.icon = true;
          }
          console.log("123", res);
        });
      });
    },
    // 添加收藏
    addCollect() {
      if (!this.icon) {
        addCollection({
          pid: this.rid,
          uid: this.$store.state.user.uid,
          uname: this.$store.state.user.uname,
          title: this.petMessage.title,
          label: this.petStatus,
          age: this.petMessage.age,
          sex: this.petMessage.sex,
          area: this.petMessage.area,
          imgname: this.petMessage.imgname,
        }).then(res => {
          console.log(res);
          if (res.data.status != 200) {
            this.icon = false;
            return Toast.fail({ message: "收藏失败!" });
          }
          this.icon = true;
          return Toast.success({ message: "收藏成功!" });
        });
      }
    },

    // 删除收藏
    removeCollect() {
      if (this.icon) {
        removeCollection({
          uid: this.$store.state.user.uid,
          title: this.petMessage.title,
        }).then(res => {
          console.log(res);
          if (res.data.status != 200) {
            this.icon = true;
            return Toast.fail({ message: "err!" });
          }
          this.icon = false;
          return Toast.fail({ message: "已取消收藏!" });
        });
      }
    },
    //足迹
    a() {
      getSingleRe({
        pid: this.$route.params.rid,
      }).then(res => {
        console.log(res);
        this.petfade = res.data.message[0];
        getaddFade({
          pid: this.$route.params.rid,
          uid: this.$store.state.user.uid,
          uname: this.$store.state.user.uname,
          imgname: this.petfade.imgname,
          nickname: this.petfade.title,
          label: this.petfade.label,
          age: this.petfade.age,
          sex: this.petfade.sex,
          area: this.petfade.area,
          time: "2022-11-30",
        }).then(res => {
          console.log(res);
        });
      });
    },
  },
  mounted() {
    this.getSingleMessage();
    this.a();
  },
};
</script>

<style lang="scss" scoped>
#content {
  font-family: "黑体";
  position: absolute;
  z-index: 999;
  width: 100%;
  height: 100vh;
  background: #ffffff;
  height: 100vh;
  width: 100%;
  // background: -webkit-gradient(linear, 0% 0%, 0% 35%, from(#face23), to(#fff));
  .van-nav-bar {
    height: 30px;
    background: none;
    ::v-deep .van-icon {
      color: black;
    }
    ::v-deep .van-nav-bar__title {
      font-weight: bold;
      font-family: "黑体";
    }
  }

  .imgbody {
    width: 90%;
    height: 160px;
    margin-top: 100px;
    margin: 0 auto;
    border-radius: 13px;
    margin-top: 15px;

    > img {
      width: 100%;
      height: 160px;
    }
  }

  > p {
    padding: 0;
    width: 90%;
    margin: 20px auto 20px auto;
    font-size: 17px;

    &:last-child {
      font-size: 18px;
    }
  }

  .label {
    width: 90%;
    margin: 0 auto;
    font-size: 12px;
    height: 25px;
    span {
      display: inline-block;
      margin-right: 10px;
      width: 55px;
      height: 25px;
      background: #fff5f4;
      border-radius: 5px;
      text-align: center;
      line-height: 25px;
      color: #bf675d;
    }
    .no {
      background: #f6f6f6;
      color: #9d9d9d;
    }
  }
  > dt {
    padding: 0 0 0 15px;
    margin: 0;
    width: 90%;
    margin: 0 auto;
    display: flex;
    font-size: 14px;
    margin-top: 20px;
    dl {
      padding: 0;
      margin: 0;

      &:first-child {
        margin-right: 3px;
      }

      &:nth-child(3) {
        margin-left: -2px;
        color: #9d9d9d;
        margin-right: 2px;
      }

      &:nth-child(4) {
        color: #9d9d9d;
      }
    }
  }
  .store {
    width: 90%;
    height: 130px;
    margin: -3px auto 0 auto;
    font-size: 14px;
    color: #7f7f7f;
    line-height: 20px;
    overflow: scroll;
  }

  .tabBar {
    width: 100%;
    height: 39px;
    padding: 5px 30px;
    position: fixed;
    bottom: 0;
    left: 0;
    border-top: 1px solid #c9c6bf;
    display: flex;
    > div {
      display: flex;
      flex-direction: column;
      align-items: center;
      .iconfont {
        font-size: 24px;
      }
      .icon-shoucang-shoucang {
        font-size: 24px;
        color: #ed4844;
      }

      span {
        font-size: 6px;
        margin-top: 5px;
      }

      &:first-child {
        margin-right: 60px;
      }
      &:nth-child(2) {
        margin-right: 55px;
      }
    }
    .van-button {
      width: 130px;
      height: 40px;
      font-size: 16px;
      border: 1px solid #352f31;
      background: #ed4844;
    }
  }
  .van-cell {
    line-height: 0.4rem;
    flex-direction: column;
    justify-content: space-around;
  }
}
</style>
